<template>
  <div class="main-div">

    <Modal
      :mask-closable="false"
      v-model="addSubTask.model"
      title="添加虚拟任务"
      width="50%"
      :transfer="false"
      @on-cancel="handleAddSubTaskReset"
    >
      <div>

        <Form ref="addSubTask" :model="addSubTask" :label-width="120" :rules="addSubTaskRuleValidate">
          <FormItem v-model="addSubTask.strategyId" label="策略" prop="strategyId">
            <el-radio v-model="addSubTask.strategyId" label="2">抢占模式</el-radio>
            <el-radio v-model="addSubTask.strategyId" label="1">独占模式</el-radio>

          </FormItem>
          <FormItem v-if="addSubTask.strategyId==1" v-model="addSubTask.multiPlayerStrategyId" label="多人审批的策略" prop="multiplayerStrategyId">
            <el-radio v-model="addSubTask.multiPlayerStrategyId" label="1">依次审批</el-radio><br>
            <el-radio v-model="addSubTask.multiPlayerStrategyId" label="2">会签(需所有人审批通过)</el-radio><br>
            <el-radio v-model="addSubTask.multiPlayerStrategyId" label="3">或签(一名审批人同意或者拒绝即可)</el-radio>

          </FormItem>

          <FormItem label="处理人" prop="handlerId">
            <Button
              v-for="(item,index) in addSubTask.usersInfo"
              v-model="addSubTask.handlerId"
              type="primary"
              style="margin-left: 2px"
              color="primary"
              @click="delCommonUsers(index)"
            >
              {{ item.fullname }} &nbsp;<Icon type="md-close"/>

            </Button>
            <Button type="error" @click="selectUsers(0)">
              <Icon type="ios-contact"/>
              处理人
            </Button>
            <user-multiple-dialog
              :on-ok="confirmDialogEvent"
              :show.sync="show"
              :exist-data="addSubTask.usersInfo"
              :alias="alias"
            />
          </FormItem>


        </Form>

      </div>
      <div slot="footer">
        <Button @click="handleAddSubTaskReset('addSubTask')">取消</Button>
        <Button type="primary" @click="addSubTaskHandler">确定</Button>
      </div>
    </Modal>
    <Row>
      <Col span="4">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>
      </Col>
      <Col span="20">
        <Card dis-hover class="task-card">
          <div class="app-container">
            <el-row type="flex" justify="start">
              <el-form :inline="true" :model="queryForm" class="demo-form-inline" size='mini'>

                <el-form-item label="时间区间">
                  <el-date-picker
                    v-model="queryDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    unlink-panels
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>


                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>


            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                >
                  <el-table-column
                    fixed
                    prop="taskTitle"
                    label="任务标题"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="categoryName"
                    label="所属分类"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="任务名称"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="priority"
                    label="类型"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <Tag v-if="scope.row.priority==50" color="primary">普通</Tag>
                      <Tag v-else-if="scope.row.priority>50 && scope.row.priority<=100" color="warning">加急</Tag>
                      <Tag v-else color="error">紧急</Tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="priority"
                    label="任务池"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <Tag v-if="scope.row.scopeType==null" color="primary">常规任务</Tag>
                      <Tag v-else-if="scope.row.scopeType=='taskPool'" color="warning">虚拟任务</Tag>
                      <Tag v-else color="error">紧急</Tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="接受时间"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="dueDate"
                    show-overflow-tooltip
                    label="到期时间"
                  >
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="130">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="small">办理</el-button>
                      <el-button @click="handleAddSubNodeClick(scope.row)" type="text" size="small">添加任务</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-row>
          </div>
        </Card>
      </Col>


    </Row>
  </div>


</template>

<script>
  import {getAllTaskData, getTaskChartData, getBpmnModelCategory,saveSubTask} from "@/api/analy";
  import userMultipleDialog from '@/views/components/org/userMultipleDialog'

  export default {
    name: 'Task',
    components: {
      userMultipleDialog
    },

    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        show: false,
        existData: [],
        tableData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        chartData: {},
        shopName: [],
        addSubTask: {
          model: false,
          strategyId: "2",
          usersInfo: [],
          parentTaskId: '',
          multiPlayerStrategyId: '1',
          handlerId: ''
        },
        alias: 'addSubTask',
        addSubTaskRuleValidate: {
          handlerId: [
            {required: true, message: '办理人必须填写', trigger: 'blur'}
          ],
          option: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]

        },
        queryForm: {
          name: "",
          startTime: "",
          endTime: "",
          page: 0,
          limit: 10,
          whereSql: "",
          typeKey: ""
        },
        categoryData: []
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      resetQuery:function(){
        this.queryForm.name = "";
        this.queryForm.createTime = "";
        this.queryForm.startTime = "";
        this.queryForm.endTime = "";
        this.queryForm.page = 0;
        this.queryDate = [];
      },
      delCommonUsers: function (index) {
        this.addSubTask.usersInfo.splice(index, 1)
      },
      confirmDialogEvent: function (data) {
        if (data) {
          this.addSubTask.usersInfo = data;
          var str = "";
          for (var i = 0; i < data.length; i++) {
            str += data[i].userNo+ ",";
          }
          //去掉最后一个逗号(如果不需要去掉，就不用写)
          if (str.length > 0) {
            str = str.substr(0, str.length - 1);
          }
          this.addSubTask.handlerId=str;



        }
      },
      selectUsers: function () {
        this.show = true
      },
      queryFormCreateTime: function (e) {
        if(e){
          this.queryForm.startTime=e[0]
          this.queryForm.endTime=e[1]
        }

      },
      handleAddSubTaskReset: function () {
        this.handleReset()
        this.existData=[]
        this.addSubTask.model = false;
      },
      refreshTask: function (data) {
        if (data[0].parentId == '-1') {
          this.queryForm.typeKey = ""
        } else {
          this.queryForm.typeKey = data[0].typeKey;

        }
        this.queryForm.createTime = ""
        this.queryDate = [];
        this.queryForm.whereSql = "";
        this.getData()

      },
      queryMethod: function () {
      this.getTaskData();

      },

      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
      this.getTaskData();
      },
      getTaskData:function(){
        getAllTaskData(this.queryForm).then((response) => {
          this.tableData = response.data
          if (response.count.length > 0) {
            this.total = parseInt(response.count);
          } else {
            this.total = 0;
          }

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      handleClick(data) {
        this.$router.push({name: 'handleRunTask', query: {t: new Date().getTime(), "taskId": data.id,"scopeType":data.scopeType,"monitor":true}})
      },
      handleAddSubNodeClick(data) {
        this.addSubTask.model = true
        this.addSubTask.parentTaskId = data.id
      },
      handleReset() {
        this.addSubTask.usersInfo = [];
        this.addSubTask.handlerId = '';
        this.addSubTask.strategyId = '1';
      },
      search() {
        this.queryForm.page = 0
        if (this.queryDate){

          this.queryForm.startTime=this.queryDate[0]
          this.queryForm.endTime=this.queryDate[1]
        }

        this.queryMethod()

      },

      addSubTaskHandler() {
        this.$refs['addSubTask'].validate((valid) => {
          if (valid) {
            const obj = JSON.parse(JSON.stringify(this.addSubTask))
            delete (obj['usersInfo'])
            delete (obj['model'])

            saveSubTask(obj).then((response) => {
              if (response.code == 0) {
                this.$message({"duration":800,message:'添加成功',type:'warning',customClass:'zZindex'});

                this.addSubTask.model=false
                this.handleReset()
                this.getTaskData();
              } else {
                this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});

              }
            })
          } else {

          }
        })
      },

      reset() {

        this.resetQuery();
        this.getData()
      },


    }

  }

</script>
<style lang="scss">
  .task-card {
    margin-top: 10px;
  }

</style>
